<template>
	<view class="content">
		<form>
			<view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action">
					<text class="cuIcon-titles text-green"></text>
					<text class="text-xl text-bold">基本信息</text>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title">市州</view>
				<picker class="align-start" @change="CityChange" :value="cityIndex" :range="Citys">
					<view :class="cityIndex==-1?'text-gray':''">
						{{cityIndex>-1?Citys[cityIndex]:'请选择市州'}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">区域</view>
				<picker class="align-start" @change="AreaChange" :value="areaIndex" :range="Areas">
					<view :class="areaIndex==-1?'text-gray':''">
						{{areaIndex>-1?Areas[areaIndex]:'请选择区域'}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">楼盘名称</view>
				<input placeholder="请输入楼盘名称" v-model="applyInfo.houseName"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">驻场姓名</view>
				<input placeholder="请输入驻场姓名" name="name" v-model="applyInfo.name"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">联系方式</view>
				<input placeholder="请输入联系方式" name="tel" v-model="applyInfo.tel"></input>
			</view>
			<view class="cu-form-group" v-if="applyInfo.channel=='sale'">
				<view class="title">佣金</view>
				<input placeholder="请输入佣金" name="fxmoney" v-model="applyInfo.fxmoney"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">面积</view>
				<input placeholder="请输入面积" name="mianji" v-model="applyInfo.mianji"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">均价</view>
				<input placeholder="请输入均价" name="houseprice" v-model="applyInfo.houseprice"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">地址</view>
				<input placeholder="请输入地址,留空则使用位置选择的地址" name="houseaddress" v-model="applyInfo.houseaddress"></input>
			</view>

			<view class="cu-form-group">
				<view class="title">位置</view>
				<text :class="applyInfo.address==''?'text-gray':''" style="flex:1;" @tap="ChoseLocation()" placeholder="请选择位置" name="text">{{applyInfo.address!=""?applyInfo.address:"请选择位置"}}</text>
				<text class='cuIcon-locationfill text-orange' @tap="ChoseLocation()"></text>
			</view>

			<view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action">
					<text class="cuIcon-titles text-green"></text>
					<text class="text-xl text-bold">类型</text>
				</view>
			</view>

			<view class="cu-form-group" v-if="applyInfo.channel=='sale'">
				<radio-group class="grid col-3" style="flex:auto;" @change="letwayChange">
					<view>
						<radio class="round blue" :class="applyInfo.letway=='1'?'checked':''" :checked="applyInfo.radio=='1'?true:false"
						 value="1"></radio>出租
					</view>
					<view>
						<radio class="round blue" :class="applyInfo.letway=='2'?'checked':''" :checked="applyInfo.radio=='2'?true:false"
						 value="2"></radio>出售
					</view>

				</radio-group>
			</view>

			<view class="cu-form-group" v-else>
				<radio-group class="grid col-3" style="flex:auto;" @change="typeChange">
					<view v-for="item in publishTypes" :key="item.value">
						<radio class="round blue" :class="applyInfo.type==item.value?'checked':''" :checked="applyInfo.radio==item.value?true:false"
						 :value="item.value"></radio>{{item.value}}
					</view>
				</radio-group>
			</view>


			<view class="cu-bar bg-white solid-bottom margin-top" v-if="applyInfo.channel=='sale'">
				<view class="action">
					<text class="cuIcon-titles text-green"></text>
					<text class="text-xl text-bold">房源来源</text>
				</view>
			</view>

			<view class="cu-form-group" v-if="applyInfo.channel=='sale'">
				<radio-group class="grid col-3" style="flex:auto;" @change="sourceChange">
					<view>
						<radio class="round blue" :class="applyInfo.source=='公司'?'checked':''" :checked="applyInfo.source=='公司'?true:false"
						 value="公司"></radio>公司
					</view>
					<view>
						<radio class="round blue" :class="applyInfo.source=='个人'?'checked':''" :checked="applyInfo.source=='个人'?true:false"
						 value="个人"></radio>个人
					</view>
					<view>
						<radio class="round blue" :class="applyInfo.source=='项目招租'?'checked':''" :checked="applyInfo.source=='项目招租'?true:false"
						 value="项目招租"></radio>项目招租
					</view>
				</radio-group>
			</view>



			<view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action">
					<text class="cuIcon-titles text-green"></text>
					<text class="text-xl text-bold">楼盘类型</text>
				</view>
			</view>
			<view class="cu-form-group">
				<checkbox-group name="housetype" class="grid col-3" style="flex:auto;" @change="houseTypeChange" v-if="applyInfo.channel=='new'">
					<view v-for="(item,index) in newTypes" :key="index">
						<checkbox class="blue" :class="item.checked?'checked':''" :checked="item.checked?true:false" v-model="item.value"></checkbox>{{item.value}}
					</view>
				</checkbox-group>

				<checkbox-group name="housetype" class="grid col-3" style="flex:auto;" @change="houseTypeChange" v-if="applyInfo.channel=='sale'">
					<view v-for="(item,index) in saleTypes" :key="index">
						<checkbox class="blue" :class="item.checked?'checked':''" :checked="item.checked?true:false" v-model="item.value"></checkbox>{{item.value}}
					</view>
				</checkbox-group>

				<checkbox-group name="housetype" @change="houseTypeChange" class="grid col-3" style="flex:auto;" v-if="applyInfo.channel=='dazong'">
					<view v-for="(item,index) in bigTypes" :key="index">
						<checkbox class="blue" :class="item.checked?'checked':''" :checked="item.checked?true:false" v-model="item.value"></checkbox>{{item.value}}
					</view>
				</checkbox-group>
			</view>

			<view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action">
					<text class="cuIcon-titles text-green"></text>
					<text class="text-xl text-bold">情况说明</text>
				</view>
			</view>
			<view class="cu-form-group">
				<textarea placeholder="请输入项目介绍参数或商务合作情况" name="content" v-model="applyInfo.content"></textarea>
			</view>


			<view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action">
					<text class="cuIcon-titles text-green"></text>
					<text class="text-xl text-bold">图片上传</text>
				</view>
			</view>
			<view class="cu-bar bg-white margin-top">
				<view class="action">
					效果图
				</view>
				<view class="action">
					{{images.thumb_urls.length}}/8
				</view>
			</view>
			<view class="cu-form-group">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in images.thumb_urls" :key="index" @tap="ViewImage" :data-url="images.thumb_urls[index]">
						<image :src="images.thumb_urls[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" data-type="thumb_urls" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage" data-type="thumb_urls" v-if="images.thumb_urls.length<8">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>

			<view class="cu-bar bg-white margin-top">
				<view class="action">
					户型图
				</view>
				<view class="action">
					{{images.thumb_1s.length}}/8
				</view>
			</view>
			<view class="cu-form-group">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in images.thumb_1s" :key="index" @tap="ViewImage" :data-url="images.thumb_1s[index]">
						<image :src="images.thumb_1s[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" data-type="thumb_1s" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage" data-type="thumb_1s" v-if="images.thumb_1s.length<8">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>

			<view class="cu-bar bg-white margin-top">
				<view class="action">
					样板间图
				</view>
				<view class="action">
					{{applyInfo.thumb_2s.length}}/8
				</view>
			</view>
			<view class="cu-form-group">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in images.thumb_2s" :key="index" @tap="ViewImage" data-type="thumb_2s"
					 :data-url="images.thumb_2s[index]">
						<image :src="images.thumb_2s[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" data-type="thumb_2s" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage" data-type="thumb_2s" v-if="images.thumb_2s.length<8">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>

			<view class="cu-bar bg-white margin-top">
				<view class="action">
					周边图
				</view>
				<view class="action">
					{{images.thumb_3s.length}}/8
				</view>
			</view>
			<view class="cu-form-group">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in images.thumb_3s" :key="index" @tap="ViewImage" data-type="thumb_3s"
					 :data-url="images.thumb_3s[index]">
						<image :src="images.thumb_3s[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" data-type="thumb_3s" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage" data-type="thumb_3s" v-if="images.thumb_3s.length<8">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>


		</form>
		<view style="height:60px;"> </view>
		<view class="bottom" @tap="sumbmit">立即发布</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				areaIndex: -1,
				cityIndex:-1,
				Areas: [],
                Citys:[],
				publishTypes: [],
				applyInfo: {
					areaname: '',
					//houseId:'',
					houseName: '',
					name: '',
					tel: '',
					fxmoney: '',
					houseprice: '',
					houseaddress: '',
					imgList: [],
					type: '',
					channel: '',
					address: '',
					source: '',
					lat: 0,
					lng: 0,
					letway: '',
					housetypeList: [],
					memberId: '',
					content: '',
					thumb_urls: [],
					thumb_1s: [],
					thumb_2s: [],
					thumb_3s: [],
				},
				images: {
					thumb_urls: [],
					thumb_1s: [],
					thumb_2s: [],
					thumb_3s: [],
				},
				newTypes: [],
				saleTypes: [],
				bigTypes: [],

			};
		},
		onLoad(option) {
			this.applyInfo.channel = option.type;
			this.loadSelectList();
			this.loadUserInfo();
		},
		methods: {
			tapGuwen() {
				this.type = 'gw';
			},
			tapZhuchang() {
				this.type = 'zc';
			},
		
			letwayChange(e) {
				this.applyInfo.letway = e.detail.value;
			},
			typeChange(e) {
				this.applyInfo.type = e.detail.value;
			},
			sourceChange(e) {
				this.applyInfo.source = e.detail.value;
			},
			houseTypeChange(e) {
				this.applyInfo.housetypeList = e.detail.value;
			},
			ViewImage(e) {
				var type = e.currentTarget.dataset.type;
				uni.previewImage({
					urls: this.images[type],
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				var me = this;
				var type = e.currentTarget.dataset.type;
				uni.showModal({
					title: '提示',
					content: '确定要删除吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							me.applyInfo[type].splice(e.currentTarget.dataset.index, 1)
							me.images[type].splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			selectHouse() {
				uni.navigateTo({
					url: '/pages/ruzhu/select'
				})
			},
			ChoseLocation() {
				var me = this;
				uni.chooseLocation({
					success: function(res) {
						me.applyInfo.address = res.address;
						me.applyInfo.lat = res.latitude;
						me.applyInfo.lng = res.longitude;
					}
				});
			},
			AreaChange(e) {
				this.areaIndex = e.detail.value
				this.applyInfo.areaname = this.areaIndex > -1 ? this.Areas[this.areaIndex] : '';
				console.log(this.areaIndex);
			},
			CityChange(e){
				this.cityIndex = e.detail.value;
				
				var me = this;
				var url = me.$rootUrl + '/Area/GetList';
				me.areaIndex=-1;
				uni.request({
					url: url,
					data: {
						CityName:me.Citys[me.cityIndex]
					},
					method: 'GET',
					success(res) {
						if (res.data.success) {
							me.Areas=[];
							res.data.items.forEach(n => me.Areas.push(n.name));
						} else {
							uni.showModal({
								content: '服务器错误!',
								showCancel: false
							});
						}
					},
					fail() {
						me.isLoading = false;
						me.loadMoreText = me.connectionFailText;
						uni.showModal({
							content: me.connectionFailText,
							showCancel: false
						});
					}
				});
			},
			loadSelectList() {
				var me = this;
				var url = me.$rootUrl + '/Dic/GetAllDicList';

				uni.request({
					url: url,
					data: {},
					method: 'GET',
					success(res) {
						if (res.data.success) {
							res.data.areas.forEach(n => me.Areas.push(n.value));
							res.data.citys.forEach(n => me.Citys.push(n.value));
							res.data.publishTypes.forEach(n => me.publishTypes.push(n));
							res.data.newTypes.forEach(n => me.newTypes.push({
								value: n.value,
								checked: false
							}));
							res.data.saleTypes.forEach(n => me.saleTypes.push({
								value: n.value,
								checked: false
							}));
							res.data.bigTypes.forEach(n => me.bigTypes.push({
								value: n.value,
								checked: false
							}));
						} else {
							uni.showModal({
								content: '服务器错误!',
								showCancel: false
							});
						}
					},
					fail() {
						me.isLoading = false;
						me.loadMoreText = me.connectionFailText;
						uni.showModal({
							content: me.connectionFailText,
							showCancel: false
						});
					}
				});

			},
			loadUserInfo() {
				uni.getStorage({
					key: 'UserInfo',
					success: (res) => {
						if (!res.data) {
							uni.showModal({
								content: '请先登陆!',
								showCancel: false
							});
							uni.navigateBack({});
						}
						this.applyInfo.memberId = res.data.id;
						//this.user = res.data;
					},
					fail: (e) => {
						uni.showModal({
							content: '请先登陆!',
							showCancel: false,
							success: function() {
								uni.navigateBack({});
							}
						});
					}
				});
			},
			ChooseImage(e) {
				var me = this;
				var type = e.currentTarget.dataset.type;
				var count = 8 - me.applyInfo[type].length;
				uni.chooseImage({
					count: count,
					success: (res) => {
						var files=res.tempFilePaths;
						for(var i=0;i<files.length;i++)
						{
							uni.uploadFile({
								url: me.$rootUrl + '/Attachment/Create',
								filePath: files[i],
								name: 'File',
								formData: {
									OssId: me.Id,
									Type: "销售",
								},
								success(res1) {
							
									var data = JSON.parse(res1.data);
									if (data.succuess == true) {
										
										me.applyInfo[type] = me.applyInfo[type].concat(data.url);
							
									}
							
								}
							});	
						}
						



						me.images[type] = me.images[type].concat(res.tempFilePaths)

					}
				});
			},
			sumbmit() {
				var me = this;

				if (me.applyInfo.areaname == "") {
					uni.showToast({
						icon: 'none',
						title: "区域不能为空！"
					})
					return;
				}
				if (me.applyInfo.type == "sale") {
					if (me.applyInfo.title == "") {

						uni.showToast({
							icon: 'none',
							title: "楼盘名称不能为空！"
						})
						return;
					}
				} else {
					if (me.applyInfo.houseName == "") {
						uni.showToast({
							icon: 'none',
							title: "楼盘名称不能为空！"
						})
						return;
					}

				}
				if (me.applyInfo.longitude == 0) {
					uni.showToast({
						icon: 'none',
						title: "位置不能为空！"
					})
					return;
				}
				if (me.applyInfo.tel == "") {
					uni.showToast({
						icon: 'none',
						title: "联系方式不能为空！"
					})
					return;
				}
				if (me.applyInfo.thumb_urls.length == 0) {

					uni.showToast({
						icon: 'none',
						title: "请至少上传一张效果图！"
					})
					return;
				}
				if (me.applyInfo.content == "") {
					uni.showToast({
						icon: 'none',
						title: "情况说明不能为空！"
					})
					return;
				}

				uni.request({
					url: me.$rootUrl + '/House/WxCreate',
					data: me.applyInfo,
					method: 'POST',
					success(res) {
						if (res.data.success) {
							uni.showModal({
								content: '提交成功!',
								showCancel: false
							});
							uni.navigateBack({})
						} else {
							uni.showModal({
								content: '服务器错误!',
								showCancel: false
							});
						}
					},
					fail() {
						me.isLoading = false;
						me.loadMoreText = me.connectionFailText;
						uni.showModal({
							content: me.connectionFailText,
							showCancel: false
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.content {
		.bottom {
			z-index: 1000;
			position: fixed;
			bottom: 0;
			background-color: #D1372C;
			padding: 8px 0;
			width: 100%;
			font-size: 35upx;
			text-align: center;
			color: white;
		}

		.cu-form-group {
			.col-3 {
				view {
					padding: 2px 0;
				}
			}
		}
	}

	.image-lebel {
		margin: 0 auto;
	}
</style>
